<extend name="Layout/index" />
<block name="link">
	<link rel="stylesheet" href="__PUBLIC__/component/page.css">
</block>
<block name="breadcrumb-01">
	<li>
		<i class="icon-home home-icon"></i>
		<a href="#">首页</a>
	</li>
	<li class="active">品牌管理</li>
</block>

<block name="breadcrumb-02">
	<h1>
		品牌管理
		<small>
			<i class="icon-double-angle-right"></i>
			 品牌列表
		</small>
	</h1>
</block>
<block name="main">
		<div class=""><button id="addBtn" class="btn btn-warning"><span style="color:white;font-size:20px;font-weight:bold" class="glyphicon glyphicon-plus"></span>品牌添加</button></div>
		<table class="table table-striped table-bordered table-hover center">
			<thead>
				<tr align='left' bgcolor="#ccc">
					<th>编号</th>
					<th>品牌名称</th>
					<th>品牌网址</th>
					<th>品牌logo</th>
					<th>操作</th>
				</tr>
			</thead>
				<tbody>
				<volist name="list" id="brand">
				<tr>
					<td><{$brand.id}></td>
					<td><{$brand.brandname}></td>
					<td><{$brand.url}></td>
					<td><img src="__PUBLIC__<{$brand.logo}>" width="100" height="60px"></td>
					<td>
						<a data-id="<{$brand.id}>"  data-name="<{$brand.brandname}>" href="javascript:void(0)"><button type="button" class="btn btn-danger btn-delete">删除</button></a>
						<a data-id="<{$brand.id}>" href="javascript:void(0)"><button type="button" class="btn btn-success btn-update">编辑</button></a>
					</td>
				</tr>
				</volist>
				</tbody>

				<tfoot style="height:40px">
					<td colspan="5"><{$page}></td>
				</tfoot>
		</table>

		<!--添加品牌的摸态框-->
		<div class="modal fade" id="addBox">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"></button>
		        <h4 class="modal-title">品牌添加</h4>
		      </div>
		      <div class="modal-body" >
		          
					<!--具体的表单-->
					<form id="addForm" name="addForm" role="form" enctype="multipart/form-data" method="post" action="<{:U('Brand/add')}>">
						  <div class="form-group">
						    <label for="exampleInputEmail1">品牌名</label>
						    <input name="brandname" type="text" class="form-control required" id="exampleInputEmail1" placeholder="品牌名">
						    <label style="display:none" class="control-label" for="inputError2">品牌名不能为空</label>
						  </div>

						  <div class="form-group">
						    <label for="exampleInputPassword1">品牌官网地址</label>
						    <input name="url" type="text" class="form-control required" id="exampleInputPassword1" placeholder="品牌url">
						    <label style="display:none" class="control-label" for="inputError2">不是有效的url</label>
						  </div>
						  <div class="form-group">
						    <label for="exampleInputFile">品牌logo</label>
						    <input type="file" id="exampleInputFile" name="logo">
						    <label style="display:none" class="control-label" for="inputError2">不是有效的图片</label>
						  </div>
					</form>
				  <!--具体的表单-->
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		        <button type="submit" class="btn btn-primary" form="addForm">确认添加</button>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
	    </div><!-- /.modal -->

	    <!--添加品牌的摸态框-->
		<div class="modal fade" id="editBox">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"></button>
		        <h4 class="modal-title">品牌添加</h4>
		      </div>
		      <div class="modal-body" >
		          
					<!--具体的表单-->
					<form id="editForm" name="editForm" role="form" enctype="multipart/form-data" method="post" action="<{:U('Brand/edit')}>">
						  <div class="form-group">
						    <label for="exampleInputEmail1">品牌名</label>
						    <input name="brandname" type="text" class="form-control required" id="exampleInputEmail1" placeholder="品牌名">
						    <label style="display:none" class="control-label" for="inputError2">品牌名不能为空</label>
						  </div>
						  <input type="hidden" name="id" value="" />
						  <div class="form-group">
						    <label for="exampleInputPassword1">品牌官网地址</label>
						    <input name="url" type="text" class="form-control required" id="exampleInputPassword1" placeholder="品牌url">
						    <label style="display:none" class="control-label" for="inputError2">不是有效的url</label>
						  </div>
						  <div class="form-group">
						    <label for="exampleInputFile">原始品牌logo</label>
						    <img src="" width="100px" height="100px" class="control-label" for="inputError2">
						  </div>
						  <div class="form-group">
						    <label for="exampleInputFile">品牌logo</label>
						    <input type="file" id="exampleInputFile" name="logo">
						    <label style="display:none" class="control-label" for="inputError2">不是有效的图片</label>
						  </div>
					</form>
				  <!--具体的表单-->
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		        <button type="submit" class="btn btn-primary" form="editForm">确认添加</button>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
	    </div><!-- /.modal -->

	   
</block>


<block name="end">
	<script>
		function check(pattern,val){
			if(pattern.test(val)){
				return true;
			}else{
				return false;
			}
		}

		function addMess(flag,obj){
			if(flag){
				obj.next().hide();
				obj.closest('div').removeClass('has-error').addClass('has-success');
			}else{
				obj.next().show();
				obj.closest('div').removeClass('has-success').addClass('has-error');
			}
		}

		/*验证字段*/
		$('input.required').keyup(function(){
			var patternForName = /^[\u4E00-\u9FA5]|\w.*$/gi,
				patternForUrl  = /^((https|http|ftp|rtsp|mms)?:\/\/)+[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;

			if($(this).attr('name')=='brandname'){
				if(check(patternForName,$(this).val())){
					addMess(true,$(this));
				}else{
					addMess(false,$(this));
				}
			}
			if($(this).attr('name')=='url'){
				// console.log($(this).val));
				// console.log(patternForUrl.exec());
				if(check(patternForUrl,$(this).val())){
					addMess(true,$(this));
				}else{
					addMess(false,$(this));
				}
			}
		}).change(function(){
			$(this).trigger('keyup');
		})

		$('#addForm input[type="file"]').change(function(){
			// $(this).get(0).files[0].test();
			// alert(/^image/ig.exec($(this).get(0).files[0].type));
			if(check(/^image/ig,$(this).get(0).files[0].type)){
				addMess(true,$(this));
			}else{
				addMess(false,$(this));
			}
			// /\.jpg$|\.jpeg$|\.gif$/i.test($(this).get(0).files[0].type)

		})
		$('#editForm input[type="file"]').change(function(){
			// $(this).get(0).files[0].test();
			// alert(/^image/ig.exec($(this).get(0).files[0].type));
			if(check(/^image/ig,$(this).get(0).files[0].type)){
				addMess(true,$(this));
			}else{
				addMess(false,$(this));
			}
			// /\.jpg$|\.jpeg$|\.gif$/i.test($(this).get(0).files[0].type)

		})

		$('#addForm').submit(function(event){

			$('#addForm input.required').trigger('keyup');
			console.log($('#addForm input[type="file"]').get(0).files.length);

			if($('#addForm input[type="file"]').get(0).files.length==0){
				addMess(false,$('#addForm input[type="file"]'));
			}else{
				if(check(/^image/ig,$('#addForm input[type="file"]').get(0).files[0].type)){
					addMess(true,$('#addForm input[type="file"]'));
				}else{
					addMess(false,$('#addForm input[type="file"]'));
				}
				
			}
			// console.log($('.has-success').length);
			if($('#addForm .has-success').length==3){
				return true;
			}else{
				return false;
			}
		})

		/*模态框显示*/
		$('#addBtn').click(function(){
			$('#addBox').modal({
				backdrop:'static'
			});
		})
	

		function getPage(page){
			$.ajax({
				data:{p:page},
				url:"<{:U('Brand/index')}>",
				type:'get',
				dataType:'html',
				success:function(data){
					$('tfoot td').html(data);
				}
			})
		}
		$('table').delegate('.btn-delete','click',function(){
			if(confirm('你确认要删除编号为'+$(this).parent().data('id')+'的'+$(this).parent().data('name')+'品牌?')){
				$.ajax({
					url:"<{:U('Brand/delete')}>",
					type:'post',
					// dataType:'html',
					data:{id:$(this).parent().data('id')},
					success:function(data){
						console.log(data);
						if(data===0){
							alert('删除失败');
						}else{
							alert('删除成功!');
							getPage(1);
							$('table tbody').html(data);
						}
					}
				})
			}
		}).delegate('.btn-update','click',function(){
				/*模态框显示*/
			$('#editBox').modal({'backdrop':'static'});
			var id = $(this).parent().data('id'),
				brandname = $(this).closest('tr').children('td').eq(1).html(),
				url = $(this).closest('tr').children('td').eq(2).html(),
				logo =$(this).closest('tr').children('td').eq(3).find('img').attr('src');

			$('#editForm').get(0).reset();
			console.log($('#editForm').find('input[name="brandname"]'));
			$('#editForm').find('input[name="brandname"]').val(brandname);
			$('#editForm').find('input[name="url"]').val(url);
			$('#editForm').find('img').attr('src',logo);
			$('#editForm').find('input[type="hidden"]').val(id);

		})

		$('.modal-footer').find('button').eq(0).click(function(){
			$(this).closest('.modal-content').find('form').get(0).reset();
		})
		$('#editForm').submit(function(event){
			// event.preventDefault();
			$('#editForm input.required').trigger('keyup');
			
			if($('#editForm input[type="file"]').get(0).files.length==0){
				if($('.has-success').length==2){
					return true;
				}else{
					return false;
				}
				// addMess(false,$('input[type="file"]'));
			}else{
				if(check(/^image/ig,$('#editForm input[type="file"]').get(0).files[0].type)){
					addMess(true,$('#editForm input[type="file"]'));
				}else{
					addMess(false,$('#editForm input[type="file"]'));
				}
				
			}
			console.log($('#editForm .has-success').length);
			if($('#editForm .has-success').length==3){
				return true;
			}else{
				return false;
			}
		})
	</script>
</block>